﻿<Page x:Class="WpfViewBox.Window3"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window3" Height="500" Width="640"    SnapsToDevicePixels="True">
    <StackPanel   Width="600">
        <StackPanel.Resources>
            <Style TargetType="{x:Type TextBlock}">
                <Setter Property="TextAlignment" Value="Center" />
            </Style>
        </StackPanel.Resources>
        <!--If you set ColumnDefinition Width is pixel value,this column's width will be a fixed value,maybe there is free space-->
        <Grid Height="30"   VerticalAlignment="Top" ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>
            <TextBlock Background="Aqua"  Text="50"  Grid.Column="0"/>
            <TextBlock Background="RosyBrown" Text="50"  Grid.Column="1"/>
            <TextBlock Background="Bisque" Text="50"  Grid.Column="2"/>
        </Grid>

        <!--If the  ColumnDefinition width  is  all star value,this column's width will be  the whole value multiplication it's rate -->
        <Grid Height="30"  Margin="0,20,0,0"  VerticalAlignment="Top" ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <!--600*(40/(40+40+20))=240-->
                <ColumnDefinition Width="40*"/>
                <ColumnDefinition Width="20*"/>
                <ColumnDefinition Width="40*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Background="Aqua" Text="40*"   TextAlignment="Center" Grid.Column="0"/>
            <TextBlock Background="RosyBrown" Text="20*"   Grid.Column="1"/>
            <TextBlock Background="Bisque" Text="40*"  Grid.Column="2"/>
        </Grid>
        <TextBlock HorizontalAlignment="Left" Text="600*(40/(40+40+20))=240" Width="240" Height="30" Margin="0,0,0,0" Background="YellowGreen" />

        <!--If the  ColumnDefinition width  is  star value,and others is not,  the whole value subtrace fixed value that which column's width is fixed value
       then   multiplication it's rate -->
        <Grid Height="30"  Margin="0,20,0,0"  VerticalAlignment="Top" ShowGridLines="False" >
            <Grid.ColumnDefinitions>
                <!--(600-100)*(40/(40+60))=200-->
                <ColumnDefinition Width="40*"/>
                <ColumnDefinition Width="60*"/>
                <ColumnDefinition Width="100"/>
            </Grid.ColumnDefinitions>
            <TextBlock Background="Aqua"  Text="40*"   Grid.Column="0" />
            <TextBlock Background="RosyBrown"  Text="60*"  Grid.Column="1" />
            <TextBlock Background="Bisque"  Text="100"  Grid.Column="2"/>
        </Grid>
        <TextBlock HorizontalAlignment="Left" Width="200" Text="(600-100)*(40/(40+60))=200" Height="30" Margin="0,0,0,0" Background="YellowGreen" />

        <!--If the  ColumnDefinition width  is  star ,and others is not, the start mean "1*",calculate as above -->
        <Grid Height="30"  Margin="0,20,0,0"  VerticalAlignment="Top" ShowGridLines="False" >
            <Grid.ColumnDefinitions>
                <!--(600-30)*(1/(1+30))=18.3-->
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="30*"/>
                <ColumnDefinition Width="30"/>
            </Grid.ColumnDefinitions>
            <TextBlock Background="Aqua"  Text="*"  Grid.Column="0" />
            <TextBlock Background="RosyBrown"  Text="30*" Grid.Column="1" />
            <TextBlock Background="Bisque"  Text="30" Grid.Column="2"/>
        </Grid>
        <TextBlock HorizontalAlignment="Left" Width="18.3" Height="30" Margin="0,0,0,0" Background="YellowGreen" 
                   Text="18.3" ToolTip="(600-30)*(1/(30+1))=18.3" />

        <!--If the  ColumnDefinition width  is  Auto ,it's width will be determined by content width,the content object has highest priority.if it want,it can use all space  of parent -->
        <Grid Height="30"  Margin="0,20,0,0"  VerticalAlignment="Top" ShowGridLines="False" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <!--(600-30-350)*(80/(80+20))=176-->
                <ColumnDefinition Width="80*"/>
                <ColumnDefinition Width="20*"/>
                <ColumnDefinition Width="30"/>
            </Grid.ColumnDefinitions>
            <TextBlock Background="Aqua"  Text="Auto"  Width="350"  Grid.Column="0" />
            <TextBlock Background="RosyBrown" Text="80*"  Grid.Column="1" />
            <TextBlock Background="Bisque" Text="20*"  Grid.Column="2"/>
            <TextBlock Background="Bisque" Text="30"  Grid.Column="3"/>
        </Grid>
        <TextBlock HorizontalAlignment="Left" Text="(600-30-350)*(80/(80+20))=176" Width="176" Height="30" Margin="350,0,0,0" Background="YellowGreen" />

 
        <Grid Height="30"  Margin="0,20,0,0"  VerticalAlignment="Top" ShowGridLines="False" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <!--(600-30-380)=190-->
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="30"/>
            </Grid.ColumnDefinitions>
            <TextBlock Background="Aqua"  Text="Auto"  Width="380"  Grid.Column="0" />
            <TextBlock Background="RosyBrown" Text="*"  Grid.Column="1" />
            <TextBlock Background="Bisque" Text="30"  Grid.Column="2"/>
        </Grid>
        <TextBlock Background="YellowGreen" HorizontalAlignment="Left" Margin="380,0,0,0" Height="30" Text="(600-30-380)=190" Width="190" />
    </StackPanel>
</Page>
